<template>
  <div>
    <h2>Child1-----{{ numRef }}</h2>
    <button @click="addData">num++</button>
    <button @click="stopWatchNumRef()">stop watch</button>
  </div>
</template>

<script setup lang='ts'>
import { ref, toRef, toRefs, watchEffect } from 'vue'
type Props = {
  data: number
}
const props = defineProps<Props>()
const { data } = toRefs(props)

const num = data.value
const numRef = ref(num)
const stopWatchNumRef = watchEffect(() => {
  console.log(numRef.value);

})
const addData = () => {
  numRef.value++
}
// 暴露自身属性或方法给其余组件使用。
// 通过ref获取组件返回的value为Proxy响应式对象
defineExpose({
  numRef,
  data,
  addData
})
</script>
<style lang='less' scoped>
</style>